<template>
  <view class="myall page-wrap">
    <block v-if="addresslist.length>0" >
      <radio-group @change="radioChange" class="radio-group">
        <label :class="!check_flag ? 'no-redio' : ''" :key="idx" class="radio-item" v-for="(item,idx) in addresslist">
          <radio :checked="Number(item.Address_ID) === Number(check_address_id)" :disabled="!check_flag" :value="idx" class="radio-ele" color="#F43131" style="transform: scale(0.8)" v-if="check_flag" />
          <view class="flex-main fz-14"  :class="check_flag?'':'p-l-10'">
            <view class='flex-top'>
              <view class='name'>收货人：{{item.name}}</view>
              <view class='pho'>{{item.tel}}</view>
            </view>
            <view class='flex-add'>收货地址：{{item.province_name}} {{item.city_name}}
              {{item.county_name}}
              {{item.address}}
            </view>
            <view class='flex-add default' v-if="item.is_default === 1">默认地址</view>
          </view>
          <view class="flex-action">
            <layout-icon @click="deladdressFn(item.id,idx)" class="m-b-6" color="#999" size="20" type="icon-shanchu"></layout-icon>
            <layout-icon @click="addressAddEdit(item.id)" color="#999" size="20" type="icon-bianji"></layout-icon>
          </view>
        </label>
      </radio-group>
    </block>
    <block v-else>
      <layout-empty></layout-empty>
    </block>

    <div class="safearea-box"></div>
    <view @click="addressAddEdit('a')" class='tianjia m-b-safe-area flex flex-vertical-c'>
      <view class='jia_img'>
        <layout-icon color="#f43131" size="22" type="icon-icon-plus"></layout-icon>
      </view>
      <text>新增个人地址</text>
      <view class='go_img'>
        <layout-icon size="24" type="icon-arrow-right"></layout-icon>
      </view>
    </view>

  </view>
</template>

<script>
import { address, delAddress } from '@/api/user'
import { pageMixin } from '@/mixins'

import LayoutIcon from '@/components/layout-icon/layout-icon'
import { confirm, error, toast } from '@/common/fun'
import LayoutEmpty from '@/components/layout-empty/layout-empty'

export default {
  mixins: [pageMixin],
  components: {
    LayoutEmpty,
    LayoutIcon

  },
  data () {
    return {
      addresslist: [],
      del_address_id: 0, // 存储删除收货地址id
      check_address_id: 0, // 选择的ID
      check_flag: false, // 选则框是否展示  来自会员中心->收货地址 则不展示  来自提交订单->选择收货地址 则显示
      from_page: '' // 来源页面  checkout(需设置checkout页面的back_address_id)、会员中心(不需操作)
    }
  },
  methods: {
    // 选择地址
    radioChange: function (e) {
      const idx = e.detail.value // 选择的地址ID
      const addressInfo = this.addresslist[idx]
      console.log(addressInfo)
      // 来源页面
      if (this.from_page) {
        // 其他地方有用到的地方，就自己{address_id}，一样用的。。
        uni.$emit('bind_select_address', addressInfo)
        // 返回上一页
        this.$back()
      }
    },

    // 删除收获地址
    deladdressFn: function (id, idx) {
      const that = this
      let del_address_id = id
      if (!del_address_id) {
        error('收货地址id获取失败')
        return
      }
      confirm({
        content: '确定要删除此收货地址吗'
      }).then(() => {
        delAddress({ id: del_address_id }).then(res => {
          // 更新收货地址列表

          that.addresslist.splice(idx, 1)
          // 重置删除收货地址id

          del_address_id = 0

          toast('删除成功')
        })
      }).catch(() => {

      })
    },

    // 添加收货地址
    addressAddEdit (id) {
      // 判断是添加还是编辑
      let address_id = ''
      if (id !== 'a') {
        address_id = id
      }
      this.$linkTo(`/pages/address/form?from=addresslist&address_id=${address_id}`)
    },

    // 获取收货地址列表
    getAddressList () {
      address({ size: 0 }).then(res => {
        const addresslist = res.data
        this.addresslist = addresslist
      }).catch(() => {
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 有addressid 地址选择  来自订单提交->选择收货地址

    if (options.addressid) {
      this.check_address_id = options.addressid
    }
    // 页面来源
    if (options.from) {
      this.from_page = options.from
      this.check_flag = true
    }
  },
  onShow () {
    this.getAddressList()
  }
}
</script>

<style lang="scss" scoped>
  .myall {
    background-color: #FFFFFF !important;
    min-height: 100vh;
  }

  .radio-item {
    width: 750rpx;
    padding: 20rpx 0;
    overflow: hidden;
    display: flex;
    flex-flow: row;
    align-items: center;
    border-bottom: 15rpx #f4f4f4 solid;
  }

  .radio-item .radio-ele {
    width: 80rpx;
    text-align: center;
  }

  .flex-main {
    flex: 1;
    color: #666;
    line-height: 36rpx;
    display: flex;
    flex-flow: column;
  }

  .flex-main .flex-top {
    display: flex;
    flex-flow: row;
    margin-bottom: 10rpx;
  }

  .flex-main .flex-top .name {
    width: 65%;
  }

  .flex-main .flex-top .pho {
    width: 35%;
    text-align: right;
  }

  .flex-main .flex-add {
    width: 100%;
    line-height: 36rpx;
    overflow: hidden;
  }

  .flex-main .flex-add.default {
    color: #ff0000;
    margin-top: 10rpx;
  }

  .flex-action {
    padding: 0 30rpx;
    display: flex;
    flex-flow: column;
    text-align: center;
  }

  .flex-action image {
    width: 46rpx;
    height: 46rpx;
    margin-left: 37rpx;
  }

  .flex-action image:nth-child(1) {
    margin-bottom: 20rpx;
  }

  /* 没有选择框样式 */
  .radio.no-redio .flex-main {
    width: 86%;
    padding: 0 3%;
  }

  .tianjia {
    color: #666;
    line-height: 40rpx;
    font-size: 28rpx;
    width: 710rpx;
    position: fixed;
    bottom: 0;
    z-index: 5;
    padding: 20rpx;
    border-top: 1px #f4f4f4 solid;
    background: #fff;
  }

  .tianjia view.jia_img image {
    width: 40rpx;
    height: 40rpx;
  }

  .tianjia view.go_img image {
    width: 40rpx;
    height: 40rpx;
  }

  .go_img {
    margin-left: auto;
  }

  .tianjia text {
    width: 200rpx;
    float: left;
    margin-left: 10rpx;
  }
</style>
